<script setup lang="ts">
import GiftPNG from '@/assets/gift.png'
</script>

<template>
  <div class="relative flex justify-center items-center w-48 h-48">
    <div class="gift-border"></div>
    <div class="absolute z-20 w-11/12 h-11/12 rounded-full overflow-hidden">
      <img class="w-full h-full object-cover" :src="GiftPNG" />
    </div>
  </div>
</template>

<style scoped>
.gift-border {
  @apply absolute;
  @apply z-10;
  @apply w-full;
  @apply h-full;
  @apply rounded-full;
  background: conic-gradient(red, yellow, orange, red);
  animation: rorate 4s linear infinite;
}

@keyframes rorate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
